<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>E2EE WEB屏幕分享</title>
    <!-- <script src="https://libs.cdnjs.net/pako/1.0.11/pako_inflate.js"></script> -->
</head>
<body>
    <div>
        <img src="" id="screenEle" alt="" width="100%" height="100%">
    </div>
    <script>
        var E2EElib={
            encode:function(signVal,bodyContent){
                for (var i= 0,t=new ArrayBuffer(bodyContent.length),n= new Uint8Array(t); i < bodyContent.length; i++) {
                    n[i]=bodyContent.charCodeAt(i)
                }
                var signType=new Uint8Array([0,signVal])
                var BodyBytes=new Uint8Array(t)
                var retBytes=new Uint8Array(signType.byteLength+BodyBytes.byteLength)
                return retBytes.set(signType,0),retBytes.set(BodyBytes,signType.byteLength),retBytes.buffer;
            },
            decode:function(arraybuffer){
                var dataView=new DataView(arraybuffer),retSign=dataView.getInt16(0)
                //var ret= toStr?:{type:retSign,body:arraybuffer.slice(2)}
                var binary='';
                for (var i = 0,t=new Uint8Array(arraybuffer.slice(2)); i < t.byteLength; i++) {
                    binary+=String.fromCharCode(t[i])
                }
                //String.fromCharCode.apply(String, new Uint8Array(arraybuffer.slice(2)))
                return {type:retSign,body:'data:image/jpg;base64,'+window.btoa(binary)}
            }
        }
        //console.log(E2EElib.encode(200,JSON.stringify({a:1,b:2})),JSON.stringify({a:1,b:2}).length)



        var ws=new WebSocket('ws://127.0.0.1:12111')
        ws.binaryType="arraybuffer"
        ws.onopen=function(){
            console.log('connect')
            ws.send(E2EElib.encode(100,JSON.stringify({screenStates:1})))
        }
        ws.onmessage=function(evt){
            //console.log(pako.inflate(new Uint8Array(evt.data)))
            //console.log(evt.data)
            var retData=E2EElib.decode(evt.data)
            //console.log(retData)
            switch (retData.type) {
                case 200:
                    document.getElementById('screenEle').src=retData.body
                    break;
            
                default:
                    break;
            }
        }
        ws.onclose=function(){
            console.log('close')

        }
    </script>
</body>
</html>